<template>
  <div class="homeDetail">
    <div class="header">
      <van-nav-bar
        class="title"
        title="统计信息"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <div class="search">
        <van-field
          v-model="state.queryName"
          name="region"
          @click="querySelect('query')"
          readonly
          label-align="top"
          right-icon="arrow-down"
          placeholder="查询条件"
        />
        <van-dropdown-menu
          ref="menuRef"
          :close-on-click-overlay="false"
          :close-on-click-outside="false"
        >
          <van-dropdown-item ref="itemRef">
            <template #title>
              <span class="filter-o"><van-icon name="filter-o" size="20" /></span>
            </template>

            <div class="filter-content">
              <van-form ref="formRef">
                <van-cell-group>
                  <van-field
                    v-if="state.queryName == '降雨轮次查询'"
                    v-model="state.formData.rainfallCycleName"
                    label="降雨轮次"
                    @click="querySelect('rainfallCycle')"
                    placeholder="请选择降雨轮次"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-if="state.queryName == '统计时段查询'"
                    v-model="state.formData.tjDate"
                    label="统计日期"
                    @click="state.datePicker1 = true"
                    placeholder="请选择统计日期"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                    style="width: 50%"
                  />
                  <van-field
                    v-if="state.queryName == '统计时段查询'"
                    v-model="state.formData.timeListName"
                    label="统计时段"
                    @click="querySelect('timeList')"
                    placeholder="请选择统计时段"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                    style="width: 50%"
                  />

                  <van-field
                    v-if="state.queryName == '自定义时间查询'"
                    v-model="state.formData.timeRange"
                    @click="state.datePicker2 = true"
                    label="选择时间范围"
                    placeholder="请选择时间范围"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="state.formData.isDrillName"
                    name="region"
                    label="是否演练"
                    @click="querySelect('isDrill')"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                  <van-field
                    v-model="state.formData.workTypeName"
                    v-if="state.active == '响应工单'"
                    label="工单类型"
                    @click="querySelect('workType')"
                    style="width: 50%"
                    readonly
                    label-align="top"
                    right-icon="arrow-down"
                  />
                </van-cell-group>
              </van-form>
            </div>

            <div style="padding: 5px 10px">
              <van-button type="primary" block @click="onFirm">确认</van-button>
              <van-button style="margin-top: 5px" block @click="onReset">重置</van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </div>

    <div class="text-warp">
      <van-field
        v-model="textarea1"
        rows="7"
        type="textarea"
        placeholder="汇总文本编辑"
        readonly
        @click.stop="copyText"
      />
    </div>

    <div class="button-group">
      <van-button
        :type="state.active == item.name ? 'primary' : 'default'"
        v-for="(item, index) in state.buttonGroup"
        :key="index"
        @click="handleChange(item.name)"
        style="margin-right: 12px"
        >{{ item.name }}</van-button
      >
    </div>

    <div class="cardList">
      <template v-if="state.active === '响应工单'">
        <van-cell
          class="listItem"
          v-for="(item, index) in listCard"
          :key="index"
          @click="cardClick(item)"
        >
          <template #default>
            <div class="header">
              <div
                class="left"
                :class="
                  item.level === '1' ? 'high' : item.level === '2' ? 'middle' : 'low'
                "
              >
                {{ mapStr(item.level, "level") }}
              </div>
              <div class="center">
                {{ item.workType === "巡查工单" ? "巡查" : "值守" }}
              </div>
              <div class="yanlian" v-if="item.isDrill == 1">演练</div>
              <div class="right" :class="item.reWorkStatus == 3 ? 'active' : ''">
                {{ mapStr(item.reWorkStatus, "reWorkStatus") }}
              </div>
            </div>
            <div class="title">
              {{ item.workOrderAddress }}
            </div>
            <!-- <div class="content">
              {{ item.workOrderDescription }}
            </div> -->
            <div class="time">
              {{ new Date(item.createDate).toLocaleString() }}
            </div>
          </template>
        </van-cell>
      </template>

      <template v-else>
        <van-cell
          class="listItem2"
          v-for="(item, index) in listCard"
          :key="index"
          @click="cardClick(item)"
        >
          <template #default>
            <div class="header">
              <div
                class="left"
                :style="{
                  background:
                    item.level == 3 ? '#07c160' : item.level == 1 ? '#de2a26' : '#ff976a',
                }"
              >
                {{
                  item.level == 3
                    ? "低风险"
                    : item.level == 2
                    ? "中风险"
                    : item.level == 1
                    ? "高风险"
                    : "-"
                }}
              </div>
              <div
                class="right examine"
                style="margin-left: 10px"
                v-if="item.isDrill == 1"
              >
                演练
              </div>
              <div class="right red" style="margin-left: 10px" v-if="item.workType == 2">
                增援
              </div>
              <div style="flex: 1"></div>
              <div
                class="right"
                :class="item.state == 3 ? 'active' : item.state == 2 ? 'examine' : ''"
              >
                {{
                  item.state == 0
                    ? "未到场"
                    : item.state == 1
                    ? "处置中"
                    : item.state == 2
                    ? "待审核"
                    : item.state == 3
                    ? "已办结"
                    : "-"
                }}
              </div>
            </div>
            <div class="title">
              {{ item.riskPoint || "-" }}
            </div>
            <!-- <div class="content">
              {{ item.describe || "-" }}
            </div> -->
            <div class="time">
              {{
                item.accumulatedWaterStartTime
                  ? new Date(item.accumulatedWaterStartTime).toLocaleString()
                  : "-"
              }}
            </div>
          </template>
        </van-cell>
      </template>
    </div>

    <van-popup v-model:show="state.showPicker" destroy-on-close position="bottom">
      <van-picker
        :columns="state.columns"
        :model-value="state.pickerValue"
        @confirm="onPicker"
        @cancel="state.showPicker = false"
      />
    </van-popup>

    <van-popup v-model:show="state.datePicker1" destroy-on-close position="bottom">
      <van-date-picker
        title="选择日期"
        @confirm="changeDay"
        @cancel="state.datePicker1 = false"
        :min-date="minDate"
        :max-date="maxDate"
      >
        <van-date-picker v-model="state.formData.startDate" />
        <van-date-picker v-model="state.formData.endDate" />
      </van-date-picker>
    </van-popup>

    <van-popup v-model:show="state.datePicker2" destroy-on-close position="bottom">
      <van-picker-group
        title="自定义事件范围"
        :tabs="['开始日期', '开始时间', '结束日期', '结束时间']"
        @confirm="changeQTime"
        @cancel="state.datePicker2 = false"
      >
        <van-date-picker
          v-model="state.formData.startDate"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-time-picker
          v-model="currentTime"
          :columns-type="['hour', 'minute', 'second']"
        />
        <van-date-picker
          v-model="state.formData.endDate"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-time-picker
          v-model="currentTime"
          :columns-type="['hour', 'minute', 'second']"
        />
      </van-picker-group>
    </van-popup>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { getSelectRainfallCycle, reportworkData } from "@/api/eventTask";
import { showToast, showFailToast } from "vant";
const state = reactive({
  formData: { isDrillName: "否" },
  showPicker: false,
  datePicker1: false,
  datePicker2: false,
  pickerValue: [],
  pickerType: "",
  columns: [],
  // 查询条件名称
  queryName: "",
  active: "响应工单",
  buttonGroup: [
    {
      name: "响应工单",
    },
    {
      name: "处置工单",
    },
  ],
});

const listCard = ref([]);
// 分页查询参数
const queryParams = reactive({
  isDrill: "0",
});
const mapStr = (str, type) => {
  if (type === "level") {
    switch (str) {
      case "1":
        return "高风险";
      case "2":
        return "中风险";
      case "3":
        return "低风险";
      default:
        return "低风险";
    }
  }
  if (type === "reWorkStatus") {
    switch (str) {
      case 0:
        return "待响应";
      case 1:
        return "待就位";
      case 2:
        return "执行中";
      case 3:
        return "已完成";
    }
  }
};

const maxDate = new Date(2025, 11, 31); //最大日期
const minDate = new Date(2025, 0, 1); //最小日期
// 查询条件options
const queryList = [
  {
    text: "降雨轮次查询",
    value: 1,
  },
  {
    text: "统计时段查询",
    value: 2,
  },
  {
    text: "自定义时间查询",
    value: 3,
  },
];
// 是否演练下拉
const drillOptions = [
  {
    text: "是",
    value: "1",
  },
  {
    text: "否",
    value: "0",
  },
];

// 工单类型下拉
const workTypeOptions = [
  {
    text: "巡查工单",
    value: "巡查工单",
  },
  {
    text: "值守工单",
    value: "值守工单",
  },
];

// 统计时段下拉
const timeList = [
  { text: "7.30-10.30", value: "7.30-10.30" },
  { text: "10.30-16.30", value: "10.30-16.30" },
  { text: "16.30-次日7.30", value: "16.30-次日7.30" },
];
// 降雨轮次下拉
const rainfallCycleOptions = ref([]);
const onClickLeft = () => history.back(); //返回
// 点击查询条件
const querySelect = (type) => {
  if (type === "query") {
    state.columns = queryList;
  } else if (type === "isDrill") {
    state.columns = drillOptions;
  } else if (type === "workType") {
    state.columns = workTypeOptions;
  } else if (type === "timeList") {
    state.columns = timeList;
  } else if (type === "rainfallCycle") {
    state.columns = rainfallCycleOptions.value;
  }
  state.showPicker = true;
  state.pickerType = type;
};
// 选择下拉弹窗
const onPicker = ({ selectedValues, selectedOptions }) => {
  switch (state.pickerType) {
    case "query":
      state.formData = { isDrillName: "否" };
      state.pickerValue = [];
      state.pickerType = "";
      state.columns = [];
      // 清空 queryParams 所有属性
      for (let key in queryParams) {
        delete queryParams[key];
      }
      queryParams.isDrill = "0";
      state.queryName = selectedOptions[0].text;

      break;
    case "isDrill":
      // state.formData.isDrill = selectedValues[0].value;
      queryParams.isDrill = selectedOptions[0].value;
      state.formData.isDrillName = selectedOptions[0].text;
      break;
    case "workType":
      // state.formData.workType = selectedValues[0].value;
      queryParams.workType = selectedOptions[0].value;
      state.formData.workTypeName = selectedOptions[0].text;
      break;
    case "rainfallCycle":
      // state.formData.rainfallCycle = selectedValues[0].value;
      queryParams.rainfallCycle = selectedOptions[0].value;
      state.formData.rainfallCycleName = selectedOptions[0].text;
      break;
    case "timeList":
      state.formData.timeListName = selectedOptions[0].text;
      changeTime(selectedOptions[0].text);
    default:
      break;
  }
  //分类型选择器确定
  state.pickerValue = selectedValues;
  state.showPicker = false;
};
const dateConfirm = () => {
  //日期选择器确定
  formData.creatTime = formData.startDate.join("-") + "-" + formData.endDate.join("-");
  formData.startDate = formData.startDate.join("-") + " 00:00:00";
  formData.endDate = formData.endDate.join("-") + " 00:00:00";
  datePicker.value = false;
};

// 点击响应、处置工单按钮
const handleChange = (val) => {
  state.active = val;
  getDataList();
  // 滚动到顶部
  // listContainer.value.scrollTop = 0;
};

// 获取降雨轮次列表
const geRainfallCycleList = async () => {
  let { data } = await getSelectRainfallCycle();
  if (data && data.code == 200) {
    rainfallCycleOptions.value =
      data.data.map((item) => ({
        text: item, // 或者字段名取决于接口返回结构
        value: item,
      })) || [];
  }
};

const formaInfo = ref({});
// 文本
const textarea1 = ref("");

const textStartTime = ref("");
const textEndTime = ref("");
// 获取列表数据
const getDataList = () => {
  reportworkData({ ...queryParams }).then(({ data }) => {
    if (data && data.code == 200) {
      formaInfo.value = data.data;
      if (state.active == "响应工单") {
        listCard.value = data.data.reWorkManageList || [];
      } else if (state.active == "处置工单") {
        listCard.value = data.data.cmWorkManageList || [];
      }
    } else {
      return;
    }
  });
};

// 汇总文本监听方法
const updateSummary = () => {
  // let params = { ...searchData.value };
  const { start, end } = getStartAndEndOfDay();
  // console.log('textStartTime',start);
  // console.log('-------textStartTime.value',textStartTime.value);

  // return
  const startT = textStartTime.value ? textStartTime.value : start;
  const endT = textEndTime.value ? textEndTime.value : end;
  const formatted = formatDate(startT);
  const formatted1 = formatDate(endT);
  // 有处置工单的时候（有积水情况）
  if (formaInfo.value.cmWorkManageList && formaInfo.value.cmWorkManageList.length > 0) {
    textarea1.value = `${formatted}至${formatted1}，全市未发生因城市内涝造成的人员伤亡和重大财产损失。受强降雨影响，${formaInfo.value.jsqk}全市累计出动应急抢险作业人员参与巡查处置${formaInfo.value.personnelNumber}人次，普通载人车辆${formaInfo.value.mannedVehiclesNumber}车次，特种车辆${formaInfo.value.specialVehiclesNumber}车次，排涝设备${formaInfo.value.pumpingEquipmentNumber}台次，抽排能力${formaInfo.value.extractionCapacityNumber}立方米/小时。`;
  } else if (
    formaInfo.value.reWorkManageList &&
    formaInfo.value.reWorkManageList.length > 0 &&
    formaInfo.value.zswgnumber > 0
  ) {
    textarea1.value = `${formatted}至${formatted1}，全市累计出动应急抢险作业人员参与巡查处置${formaInfo.value.personnelNumber}人次，普通载人车辆${formaInfo.value.mannedVehiclesNumber}车次，特种车辆${formaInfo.value.specialVehiclesNumber}车次，排涝设备${formaInfo.value.pumpingEquipmentNumber}台次，抽排能力${formaInfo.value.extractionCapacityNumber}立方米/小时。  【力量前置情况】${formatted}至${formatted1}，${formaInfo.value.zswgqxlist}未发生城市积水内涝。累计出动应急抢险作业人员参与巡查处置${formaInfo.value.personnelNumber}人次，普通载人车辆${formaInfo.value.mannedVehiclesNumber}车次，特种车辆${formaInfo.value.specialVehiclesNumber}车次，排涝设备${formaInfo.value.pumpingEquipmentNumber}台次，抽排能力${formaInfo.value.extractionCapacityNumber}立方米/小时。`;
  }
  // 无处置工单的时候（无积水情况）
  else if (
    formaInfo.value.cmWorkManageList &&
    formaInfo.value.cmWorkManageList.length == 0
  ) {
    textarea1.value = `${formatted}至${formatted1}，全市累计出动应急抢险作业人员参与巡查处置${formaInfo.value.personnelNumber}人次，普通载人车辆${formaInfo.value.mannedVehiclesNumber}车次，特种车辆${formaInfo.value.specialVehiclesNumber}车次，排涝设备${formaInfo.value.pumpingEquipmentNumber}台次，抽排能力${formaInfo.value.extractionCapacityNumber}立方米/小时。
`;
    // 有响应工单并且有值守
  } else {
    textarea1.value = `【力量前置情况】${formatted}至${formatted1}，${formaInfo.value.zswgqxlist}未发生城市积水内涝。累计出动应急抢险作业人员参与巡查处置${formaInfo.value.personnelNumber}人次，普通载人车辆${formaInfo.value.mannedVehiclesNumber}车次，特种车辆${formaInfo.value.specialVehiclesNumber}车次，排涝设备${formaInfo.value.pumpingEquipmentNumber}台次，抽排能力${formaInfo.value.extractionCapacityNumber}立方米/小时。`;
  }
};
// 没有选择时间的时候解决文本时间问题
const getStartAndEndOfDay = () => {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始，要+1
  const day = String(now.getDate()).padStart(2, "0");

  const start = `${year}-${month}-${day}T00:00:00`;
  const end = `${year}-${month}-${day}T23:59:59`;

  return { start, end };
};

const formatDate = (time) => {
  var str = new Date(time);
  const year = str.getFullYear();
  const month = (str.getMonth() + 1).toString().padStart(2, "0");
  const day = str.getDate().toString().padStart(2, "0");
  const hours = str.getHours().toString().padStart(2, "0");
  const minutes = str.getMinutes().toString().padStart(2, "0");
  return `${year}年${month}月${day}日${hours}时${minutes}分`;
};

// 处理时间格式
const parseTimeRange = (str) => {
  // 分割字符串：["10.30", "16.30", "Thu May 08 2025..."]
  const [startStr, endStr, dateStr] = str.split("-");

  if (!startStr || !endStr || !dateStr) {
    throw new Error("输入格式错误，请确保包含开始时间、结束时间和日期");
  }

  // 创建基准日期对象
  const baseDate = new Date(dateStr.trim());
  if (isNaN(baseDate.getTime())) {
    throw new Error("无效的日期格式");
  }

  // 辅助函数：解析 hh.mm 字符串并设置到日期对象中
  function parseTime(timeStr, date, addDays = 0) {
    let isNextDay = false;

    let hours, minutes;

    // 判断是否是“次日”格式
    if (timeStr.includes("次日")) {
      const parts = timeStr.split("次日");
      [hours, minutes] = parts[1].split(".").map(Number);
      isNextDay = true;
    } else {
      [hours, minutes] = timeStr.split(".").map(Number);
    }

    const newDate = new Date(date);
    newDate.setDate(newDate.getDate() + addDays);
    newDate.setHours(hours, minutes, 0, 0);

    return newDate;
  }

  // 解析开始时间和结束时间
  const startDate = parseTime(startStr, baseDate);
  let endDate;

  if (endStr.includes("次日")) {
    endDate = parseTime(endStr, baseDate, 1); // 次日加一天
  } else {
    endDate = parseTime(endStr, baseDate);
  }

  // 格式化为 YYYY-MM-DDTHH:mm:ss
  function formatToCustomISO(date) {
    const pad = (n) => String(n).padStart(2, "0");
    return (
      `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T` +
      `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
    );
  }

  return {
    startTime: formatToCustomISO(startDate),
    endTime: formatToCustomISO(endDate),
  };
};

watch(formaInfo, () => updateSummary(), { deep: true });
const datatime = ref("");
const statisticalPeriod = ref("");
// 统计时间
const changeDay = ({ selectedValues }) => {
  state.formData.tjDate = selectedValues.join("-");
  // qqTime.value = [];
  datatime.value = new Date(state.formData.tjDate);
  let str = "";
  if (statisticalPeriod.value != "") {
    str = `${statisticalPeriod.value}-${datatime.value}`;
  } else if (statisticalPeriod.value == "") {
    str = `00.00-23.59-${datatime.value}`;
  }
  const result = parseTimeRange(str);
  queryParams.startTime = result.startTime;
  queryParams.endTime = result.endTime;
  textStartTime.value = result.startTime;
  textEndTime.value = result.endTime;
  state.datePicker1 = false;
};

// 处理统计时间段的值
const changeTime = (val) => {
  // qqTime.value = [];
  statisticalPeriod.value = val;
  const result = parseTimeRange(`${val}-${datatime.value}`);
  queryParams.startTime = result.startTime;
  queryParams.endTime = result.endTime;
  textEndTime.value = result.endTime;
  textStartTime.value = result.startTime;
};

// 自定义时间选择
const changeQTime = (val) => {
  statisticalPeriod.value = "";
  datatime.value = "";
  const start = `${val[0].selectedValues.join("-")} ${val[1].selectedValues.join(":")}`;
  const end = `${val[2].selectedValues.join("-")} ${val[3].selectedValues.join(":")}`;
  if (new Date(start) > new Date(end)) {
    showFailToast("开始时间不能大于结束时间");
    return;
  }
  state.formData.timeRange = start + " - " + end;
  const oneMonthLater = new Date(start);
  oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
  if (new Date(end) > oneMonthLater) {
    // 超出一个月，阻止选择
    // qqTime.value = getDefaultDateTimeRange();
    showFailToast("选择的时间范围不能超过一个月！");
  } else {
    queryParams.startTime = adjustTimezone(new Date(start));
    queryParams.endTime = adjustTimezone(new Date(end));
    textStartTime.value = start;
    textEndTime.value = end;
    state.datePicker2 = false;
  }

  // 解决时间相差8小时问题
  // adjustTimezone(val);
};
// 设置默认时间：当前时间 到 当天 23:59:59
// const getDefaultDateTimeRange = () => {
//   const now = new Date();
//   // 开始时间：当前时间
//   const start = new Date(now);
//   // 结束时间：当天 23:59:59
//   const end = new Date(now);
//   end.setHours(23, 59, 59, 0);

//   return [start, end];
// };
// 解决时间差8小时的问题
const adjustTimezone = (time) => {
  let date = new Date(time);
  const offsetMs = date?.getTimezoneOffset() * -60 * 1000;
  return new Date(date.getTime() + offsetMs);
};

const menuRef = ref(null);
// 确认
const onFirm = () => {
  getDataList();
  menuRef.value.close();
};

// 重置
const onReset = () => {
  state.formData = { isDrillName: "否" };
  state.pickerValue = [];
  state.pickerType = "";
  state.columns = [];
  state.queryName = "";

  // 清空 queryParams 所有属性
  for (let key in queryParams) {
    delete queryParams[key];
  }
  queryParams.isDrill = "0";
  getDataList();
};

// 复制文本
const copyText = () => {
  const text = textarea1.value;
  if (!text) {
    showFailToast("文本为空");
    return;
  }

  const tempInput = document.createElement("textarea");
  tempInput.value = text;
  document.body.appendChild(tempInput);
  tempInput.select();
  tempInput.setSelectionRange(0, 99999);

  try {
    navigator.clipboard
      .writeText(text)
      .then(() => showToast("复制文本成功"))
      .catch(() => {
        document.execCommand("copy");
        showToast("复制文本成功");
      });
  } catch (e) {
    document.execCommand("copy");
    showToast("复制文本成功");
  }

  document.body.removeChild(tempInput);
};

onMounted(() => {
  geRainfallCycleList();
  getDataList();
});
</script>

<style lang="less" scoped>
.homeDetail {
  height: 100vh;
  background: rgba(243, 243, 243, 1);
  .header {
    background: #ffffff;
    text-align: center;
    .title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .content {
    // height: calc(100% - 88px);
    background: rgba(243, 243, 243, 1);
    margin: 10px;
    .search {
      height: 30px;
      display: flex;
      justify-content: space-between;
      .van-field {
        width: calc(100% - 40px);
        background: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin-bottom: 10px;
      }
      :deep(.van-dropdown-menu__bar) {
        background: #fff;
        margin-left: 10px;
        height: 30px;
        width: 30px;
        .van-dropdown-menu__title {
          padding: 0;
        }
        .van-dropdown-menu__title:after {
          display: none;
        }
        .van-dropdown-menu__title--down:after {
          display: none;
        }
      }
      :deep(.van-dropdown-item) {
        top: 93px !important;
      }
      .filter-o {
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .filter-content {
        padding: 10px 0;
        width: 100%;
        .van-form {
          display: flex;
          flex-wrap: wrap;
        }
        :deep(.van-cell-group) {
          display: flex;
          flex-wrap: wrap;
        }
        :deep(.van-field) {
          width: 100%;
          height: auto;
          .van-field__value {
            background: #f2f2f2;
            height: 40px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            .van-field__body {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .text-warp {
    margin: 10px;
  }

  .button-group {
    margin: 10px;
  }

  .cardList {
    margin: 10px;
    height: calc(100% - 360px);
    overflow-y: auto;
    .listItem {
      background: #fff;
      border-radius: 10px;
      padding: 1px;
      margin-bottom: 10px;
      .header {
        display: flex;
        // justify-content: space-between;
        position: relative;
        .left {
          padding: 2px 16px;
          background: #1989fa;
          color: #fff;
          border-top-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
        .right {
          padding: 2px 6px;
          color: #ee7e34;
          border: 1px solid #ee7e34;
          border-top-right-radius: 8px;
          border-bottom-left-radius: 8px;
          position: absolute;
          right: 0;
        }
        .high {
          background: #de2a26;
        }
        .middle {
          background: #ff976a;
        }
        .low {
          background: #07c160;
        }

        .center {
          border: 1px solid #1989fa;
          border-radius: 5px;
          padding: 2px 20px;
          color: #1989fa;
          margin-left: 5px;
        }
        .yanlian {
          border: 1px solid #07c160;
          border-radius: 5px;
          padding: 2px 20px;
          color: #07c160;
          margin-left: 5px;
        }
        .active {
          border: 1px solid #1989fa;
          color: #1989fa;
        }
      }
      .title {
        font-size: 14px;
        text-align: left;
        margin: 6px 10px;
        width: calc(100% - 20px);
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 可选：添加省略号 */
      }
      .content {
        color: #c4c4c4;
        font-size: 12px;
        margin: 0 10px;
        text-align: left;
      }
      .time {
        color: #c4c4c4;
        font-size: 12px;
        text-align: right;
        margin: 0 10px;
      }
    }

    .listItem2 {
      background: #fff;
      padding: 1px;
      border-radius: 10px;
      margin-bottom: 10px;
      .header {
        display: flex;
        // justify-content: space-between;
        .left {
          padding: 2px 16px;
          background: #1989fa;
          color: #fff;
          border-top-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
        .right {
          padding: 2px 6px;
          color: #ee7e34;
          border: 1px solid #ee7e34;
          border-top-right-radius: 8px;
          border-bottom-left-radius: 8px;
        }
        .examine {
          color: #07c160;
          border: 1px solid #07c160;
        }
        .red {
          color: #de2a26;
          border: 1px solid #de2a26;
        }
        .active {
          color: #1989fa;
          border: 1px solid #1989fa;
        }
      }
      .title {
        color: #000;
        font-size: 14px;
        text-align: left;
        margin: 6px 10px;
        width: calc(100% - 20px);
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 可选：添加省略号 */
      }
      .content {
        color: #c4c4c4;
        font-size: 12px;
        margin: 0 10px;
        text-align: left;
      }
      .time {
        color: #c4c4c4;
        font-size: 12px;
        text-align: right;
        margin: 0 10px;
      }
    }
  }
}
</style>
